<template>
  <div class="cart">
    <div class="content">
      <div class="content-left" @click="toggleShow">
        <div class="cartIcon-wrapper" :class="{'hightlight': totalCount>0}">
          <div class="cartIcon">
            <i class="icon-shopping_cart"></i>
          </div>
          <div class="count" v-show="totalCount>0">{{totalCount}}</div>
        </div>
        <div class="price" :class="{'hightlight': totalCount>0}">￥{{totalPrice}}</div>
        <div class="desc">另需配送费{{deliveryPrice}}元</div>
      </div>
      <div class="content-right">
        <div class="pay" :class="payClass">{{payDesc}}</div>
      </div>
    </div>
    <!--<div class="ball-container">
      <div class="ball" v-for="ball in balls" v-show="ball.show">
        <div class="inner"></div>
      </div>
    </div>-->
    <transition name="slide">
      <div class="cart-list" v-show="listShow">
        <div class="list-header">
          <span class="title">购物车</span>
          <span class="empty">清空</span>
        </div>
        <div class="list-content">
          <ul>
            <li class="food" v-for="food in selectFoods">
              <span class="name">{{food.name}}</span>
              <div class="desc">
                <span class="price">￥{{food.price * food.count}}</span>
                <span class="cartcontrol-wrapper">
                <cartcontrol :food="food"></cartcontrol>
              </span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </transition>
  </div>
</template>

<script type="text/ecmascript-6">
  import cartcontrol from '../../components/cartcontrol/cartcontrol.vue'
  export default{
    props: {
      deliveryPrice: {
        type: Number,
        default: 0
      },
      minPrice: {
        type: Number,
        default: 0
      },
      selectFoods: {
        type: Array,
        default(){
          return []
        }
      }
    },
    data(){
      return {
        balls: [
          {show: false},
          {show: false},
          {show: false},
          {show: false},
          {show: false}
        ],
        listShow: false
      }
    },
    components: {
      cartcontrol
    },
    computed: {
      totalPrice(){
        let total = 0
        this.selectFoods.forEach((food) => {
          total += food.price * food.count
        })
        return total
      },
      totalCount(){
        let count = 0
        this.selectFoods.forEach((food) => {
          count += food.count
        })
        return count
      },
      payDesc(){
        if (this.totalPrice === 0) {
          return '￥' + this.minPrice + '元起送'
        } else if (this.totalPrice < this.minPrice) {
          let diff = this.minPrice - this.totalPrice
          return '还差￥' + diff + '元'
        } else {
          return '去结算'
        }
      },
      payClass(){
        if (this.totalPrice < this.minPrice) {
          return 'not-enough'
        } else {
          return 'enough'
        }
      }
    },
    methods: {
      toggleShow(){
        if (!this.totalCount) {
          return false
        }
        this.listShow = !this.listShow
        return (this.listShow)
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .cart
    .content
      display: flex
      background: #141d27
      color: rgba(255, 255, 255, 0.4)
      .content-left
        flex: 1
        font-size: 0
        .cartIcon-wrapper
          display: inline-block
          position: relative
          top: -12px
          margin: 0 12px
          padding: 6px
          width: 44px
          height: 44px
          border-radius: 50%
          background: #141d27
          &.hightlight
            .cartIcon
              background: rgb(0, 160, 220)
              color: #fff
          .cartIcon
            padding: 10px
            width: 100%
            height: 100%
            box-sizing: border-box
            border-radius: 50%
            background: #2B333B
            text-align: center
            .icon-shopping_cart
              font-size: 24px
              line-height: 24px
          .count
            position: absolute
            top: 0
            right: 0
            /*min-width: 12px*/
            padding: 0 6px
            border-radius: 12px
            background: rgb(240, 20, 20)
            text-align: center
            line-height: 16px
            color: #fff
            font-weight: 700
            font-size: 9px
        .price
          display: inline-block
          vertical-align: top
          margin-top: 10px
          padding-right: 12px
          border-right: 1px solid rgba(255, 255, 255, 0.4)
          font-weight: 700
          font-size: 16px
          line-height: 24px
          &.hightlight
            color: #fff
        .desc
          display: inline-block
          vertical-align: top
          padding-left: 12px
          line-height: 48px
          font-size: 12px
      .content-right
        flex: 0 0 105px
        width: 105px
        .pay
          line-height: 48px
          text-align: center
          font-weight: 700
          font-size: 12px
          &.enough
            background: #00B43C
            color: #fff
          &.not-enough
            background: #141d27
            color: rgba(255, 255, 255, 0.4)
    /*.ball-container
      .ball
        position: fixed
        left: 32px
        bottom: 22px
        width: 16px
        height: 16px
        border-radius: 50%
        background: rgb(0, 160, 220)
*/
    .cart-list
      position: absolute
      top: 0
      left: 0
      width: 100%
      z-index: -1
      background: #fff
      &.slide-enter-active, &.slide-leave-active
        transition: all 0.5s linear
      &.slide-enter-active, &.slide-leave
        transform: translate3d(0, -100%, 0)

  /*&.slide-enter, &.slide-leave-active
    transform: translate3d(0, 0, 0)*/
</style>
